import React from "react";
import { Form,Icon,Input, Select,Button, Radio,InputNumber, Checkbox, Switch,DatePicker,TimePicker, Cascader } from "antd";
import moment from 'moment';

class JudgeConditions extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  renderResponseList = () => {
    const { item,apiList } = this.props;
    let responseList = []
    console.log(item);
    for(const api of apiList){
      if(api.id == item.apiId){
        responseList = api.fieldList ? api.fieldList.filter(f => f.type == 2) : []
      }
    }
    
    return responseList.map(a => {
      return <Select.Option value={a.id} key={a.id}>{a.nameZh}</Select.Option>
    })
  }

  renderDateBox = (item,index,itemIndex) => {
    const { handleOpenChange,handlePanelChange,changeDateValue } = this.props;
    const fieldInfo = item.fieldInfo
    switch(fieldInfo.dateType){
      case 0:
        return (
          <DatePicker 
            format={'YYYY'} 
            mode={'year'} 
            open={item.yearOpen} 
            onPanelChange={(value) => handlePanelChange(value,index,itemIndex,fieldInfo.dateType)} 
            onOpenChange={(value) => handleOpenChange(value,index,itemIndex)}
            value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime}
            allowClear={false}
          />
        )
      case 1:
        return (
          <DatePicker.MonthPicker value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 2:
        return (
          <DatePicker value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 3:
        return (
          <DatePicker showTime={{format:"HH"}} format={'YYYY-MM-DD HH'} value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 4:
        return (
          <DatePicker showTime={{format:"HH:mm"}} format={'YYYY-MM-DD HH:mm'} value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 5:
        return (
          <DatePicker showTime={{format:"HH:mm:ss"}} format={'YYYY-MM-DD HH:mm:ss'} value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 6:
        return(
          <TimePicker format='HH:mm' value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      case 7:
        return(
          <TimePicker format='HH:mm:ss' value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
        )
      default :
        return <DatePicker value={item.conditionValueDateTime ? moment(item.conditionValueDateTime) : item.conditionValueDateTime} onChange={(value) => changeDateValue(value,index,itemIndex,fieldInfo.dateType)} allowClear={false} />
    }
  }

  renderInput = (item,index,itemIndex) => {
    // console.log(item,index,itemIndex);
    const { changeConditionValue,changeConditionValueMultiple,changeConditionValueSwitch,changeConditionValueCascader } = this.props;
    if(item.judgeType == 0 && item.fieldInfo){
      //根据选择的字段类型，展示不同的输入框
      const fieldInfo = item.fieldInfo
      switch(fieldInfo.componentType){
        case 0 :
          //文本框
          return <Input placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(e) => changeConditionValue(e.target.value,index,itemIndex)} />
        case 1:
          //文本域
          return <Input.TextArea autoSize placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(e) => changeConditionValue(e.target.value,index,itemIndex)} />
        case 2:
          //数字框
          return <InputNumber placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(value) => changeConditionValue(value,index,itemIndex)} />
        case 3:
          //选项
          //获取选项值
          let optionList = [];
          if(fieldInfo.optionRange == 0){
            //数据字典
            optionList = fieldInfo.optionList ? fieldInfo.optionList : []
          }else{
            //自定义
            optionList = fieldInfo.optionContent ? fieldInfo.optionContent : []
          }
          //单选按钮
          if(fieldInfo.componentStyle == 0){
            return (
              <Radio.Group value={item.conditionValue}  onChange={(e) => changeConditionValue(e.target.value,index,itemIndex)} >
                {
                  optionList.map((opt,optIndex) => {
                    return <Radio value={opt} key={opt}>{opt}</Radio>
                  })
                }
              </Radio.Group>
            )
          }
          //复选框
          if(fieldInfo.componentStyle == 1){
            return (
              <Checkbox.Group value={item.conditionValueMultiple}  onChange={(value) => changeConditionValueMultiple(value,index,itemIndex)} style={{width:300}}>
                {
                  optionList.map((opt,optIndex) => {
                    return <Checkbox value={opt} key={opt}>{opt}</Checkbox>
                  })
                }
              </Checkbox.Group>
            )
          }
          //下拉框
          if(fieldInfo.componentStyle == 2){
            //单选
            if(fieldInfo.optionsType == 0){
              return (
                <Select value={item.conditionValue}  onChange={(value) => changeConditionValue(value,index,itemIndex)} style={{width:300}}>
                  {
                    optionList.map((opt,optIndex) => {
                      return <Select.Option value={opt} key={opt}>{opt}</Select.Option>
                    })
                  }
                </Select>
              )
            }
            //多选
            return (
              <Select mode='multiple' value={item.conditionValueMultiple}  onChange={(value) => changeConditionValueMultiple(value,index,itemIndex)} style={{width:300}}>
                {
                  optionList.map((opt,optIndex) => {
                    return <Select.Option value={opt} key={opt}>{opt}</Select.Option>
                  })
                }
              </Select>
            )
          }
          //开关
          if(fieldInfo.componentStyle == 3){
            return <Switch value={item.conditionValueSwitch}  onChange={(value) => changeConditionValueSwitch(value,index,itemIndex)} />
          }
          return ''
        case 4:
          //时间
          return this.renderDateBox(item,index,itemIndex)
        case 5:
          //级联
          return <Cascader placeholder="请选择条件值" style={{width:300}} options={fieldInfo.cascaderList} value={item.conditionValueCascader} onChange={value => changeConditionValueCascader(value,index,itemIndex)} />
      }
    }
    return <Input placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(e) => changeConditionValue(e.target.value,index,itemIndex)} />
  }

  render(){
    const { con,index,item,itemIndex,changeJudgeType,changeJudgeValue,changeConditionType,changeFieldType,changeApiId,changeConditionValue ,removeItem,fieldList ,apiList,responseList} = this.props;
    const inlineFormItem = {display:"inline-block",marginBottom:0}
    return(
      <div>
        <Form.Item style={inlineFormItem}>
          <Select placeholder="请选择" value={item.judgeType} style={{width:70,marginRight:5}} onChange={(value) => changeJudgeType(value,index,itemIndex)}>
            <Select.Option value={0}>字段</Select.Option>
            <Select.Option value={1}>API</Select.Option>
          </Select>
          {
            //选择字段
            item.judgeType == 0 ? (
              <Form.Item style={inlineFormItem}>
                <Select placeholder="请选择字段名" value={item.judgeValue} style={{width:170,marginRight:5}} onChange={(value) => changeJudgeValue(value,index,itemIndex)}>
                  {
                    fieldList.map(f => {
                      return <Select.Option value={f.id} key={f.id}>{f.name}</Select.Option>
                    })
                  }
                </Select>
                <Select placeholder="请选择条件" value={item.conditionType} style={{width:90,marginRight:5}} onChange={(value) => changeConditionType(value,index,itemIndex)}>
                  <Select.Option value={0}>等于</Select.Option>
                  <Select.Option value={1}>不等于</Select.Option>
                  <Select.Option value={4}>为空</Select.Option>
                  <Select.Option value={5}>不为空</Select.Option>
                  <Select.Option value={6}>包含</Select.Option>
                  <Select.Option value={7}>不包含</Select.Option>
                </Select>
                {
                  /**
                   * <Select placeholder="请选择" value={item.fieldType} style={{width:80,marginRight:5}} onChange={(value) => changeFieldType(value,index,itemIndex)}>
                  <Select.Option value={0}>常量</Select.Option>
                  <Select.Option value={1}>变量</Select.Option>
                </Select>
                   */
                }
              </Form.Item>
            ) : ''
          }
          {
            //选择API
            item.judgeType == 1 ? (
              <Form.Item style={inlineFormItem}>
                <Select placeholder="请选择api名称" value={item.apiId} style={{width:170,marginRight:5}} onChange={(value) => changeApiId(value,index,itemIndex)}>
                  {
                    apiList.map(a => {
                      return <Select.Option value={a.id} key={a.id}>{a.name}</Select.Option>
                    })
                  }
                </Select>
                <Select placeholder="请选择响应字段" value={item.judgeValue} style={{width:170,marginRight:5}} onChange={(value) => changeJudgeValue(value,index,itemIndex)}>
                  {
                    this.renderResponseList()
                  }
                </Select>
                <Select placeholder="请选择条件" value={item.conditionType} style={{width:90,marginRight:5}} onChange={(value) => changeConditionType(value,index,itemIndex)}>
                  <Select.Option value={0}>等于</Select.Option>
                  <Select.Option value={1}>不等于</Select.Option>
                  <Select.Option value={2}>大于</Select.Option>
                  <Select.Option value={3}>小于</Select.Option>
                  <Select.Option value={4}>为空</Select.Option>
                  <Select.Option value={5}>不为空</Select.Option>
                  <Select.Option value={6}>包含</Select.Option>
                  <Select.Option value={7}>不包含</Select.Option>
                </Select>
              </Form.Item>
            ) : ''
          }
          <Form.Item style={inlineFormItem}>
            {
              item.conditionType == 4 || item.conditionType == 5 ? '' : 
                item.conditionType == 2 || item.conditionType == 3 ? (
                  <InputNumber placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(value) => changeConditionValue(value,index,itemIndex)} />
                ):(
                  this.renderInput(item,index,itemIndex)
                  // <Input placeholder="请输入条件值" value={item.conditionValue} style={{width:150,marginBottom:3}} onChange={(e) => changeConditionValue(e.target.value,index,itemIndex)} />
                )
            }
          </Form.Item>
          {
            itemIndex != 0 ? (
              <Form.Item style={inlineFormItem}>
                <Icon type="delete" style={{color:"red",cursor:"pointer",marginLeft:10}} onClick={() => removeItem(index,itemIndex)} />
            </Form.Item>
            ) : ''
          }
        </Form.Item>
      </div>
    )
  }
}

export default JudgeConditions